<template>
  <a-card :body-style="{ padding: 0 }" :bordered="false">
    <div class="vaw-tab-bar-container">
      <div class="flex items-center justify-center h-full">
        <span class="arrow-wrapper" @click="leftArrowClick">
          <LeftOutlined />
        </span>
        <Scrollbar ref="scrollbar" class="flex-1" wrap-class="tab-bar__wrapper">
          <div class="flex">
            <a-button class="mx-1 tab-item" size="small" shape="round">
              选中了导航
              <span class="icon-item" @click.stop="iconClick(item.fullPath)">
                <CloseOutlined />
              </span>
            </a-button>

            <a-button class="mx-1 tab-item" size="small" shape="round">
              选中了导航2
              <span class="icon-item" @click.stop="iconClick(item.fullPath)">
                <CloseOutlined />
              </span>
            </a-button>

            <!-- <a-button
              v-for="item of state.visitedView"
              :key="item.fullPath"
              :type="currentTab === item.fullPath ? 'primary' : 'outline'"
              class="mx-1 tab-item"
              size="small"
              shape="round"
              @click="itemClick(item.fullPath, $event)"
              @contextmenu="onContextMenu(item.fullPath, $event)"
            >
              {{ item.meta ? item.meta.title : item.name }}
              <span
                v-if="!item.meta?.affix"
                class="icon-item"
                @click.stop="iconClick(item.fullPath)"
              >
                <CloseOutlined />
              </span>
            </a-button> -->
          </div>
        </Scrollbar>
        <span
          class="arrow-wrapper"
          style="transform: rotate(180deg)"
          @click="rightArrowClick"
        >
          <LeftOutlined />
        </span>
      </div>
      <ul
        v-show="showContextMenu"
        class="contex-menu-wrapper"
        :style="contextMenuStyle"
      >
        <li>
          <a-button type="text" @click="refreshRoute">
            <template #icon>
              <ReloadOutlined style="vertical-align: text-bottom" />
            </template>
            刷新页面
          </a-button>
        </li>
        <li :disabled="showLeftMenu">
          <a-button :disabled="showLeftMenu" type="text" @click="closeLeft">
            <template #icon>
              <ArrowLeftOutlined style="vertical-align: text-bottom" />
            </template>
            关闭左侧
          </a-button>
        </li>
        <li :disabled="showRightMenu">
          <a-button :disabled="showRightMenu" type="text" @click="closeRight">
            <template #icon>
              <ArrowRightOutlined style="vertical-align: text-bottom" />
            </template>
            关闭右侧
          </a-button>
        </li>
        <li>
          <a-button type="text" @click="closeAll">
            <template #icon>
              <CloseOutlined style="vertical-align: text-bottom" />
            </template>
            关闭所有
          </a-button>
        </li>
      </ul>
    </div>
  </a-card>
</template>

<script setup>
import {
  IconClose as CloseOutlined,
  IconLeft as LeftOutlined,
  IconRefresh as ReloadOutlined,
  IconToLeft as ArrowLeftOutlined,
  IconToRight as ArrowRightOutlined,
} from '@arco-design/web-vue/es/icon'
</script>

<style>
.tab-bar__wrapper {
  display: flex;
  align-items: center;
}
</style>

<style lang="less" scoped>
:deep(.arco-btn-outline) {
  border: 1px solid rgba(var(--primary-5), 0.7) !important;
  color: rgba(var(--primary-5), 0.7) !important;
  &:hover {
    border: 1px solid rgba(var(--primary-5), 1) !important;
    color: rgba(var(--primary-5), 1) !important;
  }
}
:deep(.arco-btn-primary) {
  background-color: rgba(var(--primary-5), 0.8) !important;
  &:hover {
    background-color: rgba(var(--primary-5), 1) !important;
  }
}
.vaw-tab-bar-container {
  :deep(.arco-btn-size-small) {
    padding: 0 8px;
    height: 24px;
  }
  position: relative;
  height: @tabHeight;
  box-sizing: border-box;
  white-space: nowrap;
  box-shadow: 10px 5px 10px rgb(0 0 0 / 10%);
  .contex-menu-wrapper {
    position: absolute;
    width: 130px;
    z-index: 999;
    list-style: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    background-color: #fff;
    padding-left: 0;
    & > li {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      padding: 5px 0;
      & button {
        width: 100%;
      }
    }
    & > li:hover {
      color: var(--primary-color);
    }
  }
  .humburger-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  .tab-humburger-wrapper {
    margin-left: 40px;
    transition: margin-left @transitionTime;
  }
  .tab-no-humburger-wrapper {
    margin-left: 0;
    transition: margin-left @transitionTime;
  }

  .tab-item {
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    .icon-item {
      margin-left: 0;
      width: 0;
      transition: all 0.2s ease-in-out;
      display: inline-flex;
      overflow: hidden;
    }
    &:hover {
      .icon-item {
        display: inline-flex;
        width: 16px;
        height: 16px;
        max-width: 16px;
        max-height: 16px;
        margin-left: 5px;
        font-size: 12px;
        transform: scale(0.8);
        background-color: rgba(0, 0, 0, 0.12);
        border-radius: 50%;
        padding: 2px;
        transition: all 0.2s ease-in-out;
      }
    }
  }
  .arrow-wrapper {
    cursor: pointer;
    font-size: 16px;
    margin: 0 8px;
    display: inline-flex;
  }
  .arrow-wrapper__disabled {
    cursor: not-allowed;
    color: #b9b9b9;
  }
}
</style>
